
import { ZRenderComp } from '../../../common/component/zrComp';
import { seats, EVENT_SHOW, EVENT_HIDE } from "../../compute/events";
import { layouts, color } from "./layout";
import { PickSeat } from './pickSeat';
import { Avatar } from './avatar';
import { Banner } from './banner';
import { cubicIn, cubicOut } from '../../../common/animation';

class Panel extends ZRenderComp {
	/** @type {PickSeat[]} */
	seats = [];
	/** @type {TimeBar} */
	timeBar = null;
	/** @type {Avatar} */
	avatar = null;

	constructor(args) {
		super(args.parent, args.zrender);
		this.useExistZRenderInstance(args.zr, layouts.panel.x, 0);
		const zrender = this.zrender;
		const zr = this.zr;

		// comps
		this.seats.push(
			...seats.pick.left.map(seatName => new PickSeat({ seatName, zrender, zr, parent: this, left: true })),
			...seats.pick.right.map(seatName => new PickSeat({ seatName, zrender, zr, parent: this, left: false })),
		);

		this.timeBar = new TimeBar({
			zrender, zr, parent: this,
		});
		this.avatar = new Avatar({
			zrender, zr, parent: this,
		});
		this.bannerLeft = new Banner({
			zrender, zr, parent: this, left: true
		});
		this.bannerRight = new Banner({
			zrender, zr, parent: this, left: false
		});

		// events
		this.on(EVENT_SHOW, this.onAnimate.bind(this, true));
		this.on(EVENT_HIDE, this.onAnimate.bind(this, false));
	}

	init() {
		const layout = layouts.panel;

		this.getAnimY().update()
			.when(0, layouts.panel.ySrc)
			.when(500, layouts.panel.yDst).easing(cubicOut)
			.commit();

		this.spBg = this.createRect(layout.width, layout.height)
			.fill(color.panel.bg)
			.z(0, 1)
			.build();
		this.spBgLeft = this.createRect(layout.leftBg.width, layout.leftBg.height)
			.fill(color.panel.bg)
			.position(layout.leftBg.x, layout.leftBg.y)
			.z(0, 50)
			.build();
		this.spBgRight = this.createRect(layout.rightBg.width, layout.rightBg.height)
			.fill(color.panel.bg)
			.position(layout.rightBg.x, layout.rightBg.y)
			.z(0, 50)
			.build();
	}

	onAnimate(raise) {
		this.clearAnimations();
		this.getAnimY().update()
			.when(0, raise ? layouts.panel.ySrc : layouts.panel.yDst)
			.when(1, raise ? layouts.panel.yDst : layouts.panel.ySrc).easing(raise ? cubicOut : cubicIn)
			.commit();
	}
}

class TimeBar extends ZRenderComp {
	// value
	pause = false;

	constructor(args) {
		super(args.parent, args.zrender);
		this.useExistZRenderInstance(args.zr, layouts.timeBar.x, layouts.timeBar.y);
		this.width = layouts.timeBar.width;
		this.height = layouts.timeBar.height;

		this.animation = 0;
	}

	init() {
		this.spBg = this.createRect(this.width, this.height)
			.fill(color.timeBar.bg)
			.z(0, 0)
			.build();
		this.spLight = this.createRect(this.width, this.height)
			.fill(color.timeBar.light)
			.position(0, 0) // layout.width / 2 * (1 - animation)
			.z(0, 11)
			.build();
		// 时间条最上面有个宽度为 1 的线
		this.createRect(this.width, 1)
			.fill(color.timeBar.line)
			.position(0, -1)
			.z(0, 1)
			.build();
	}

	tick(now) {
		super.tick(now);

		const newT = this.root.banPick.calcCurrentTimeProcess();
		if (newT != this.animation) {
			this.animation = newT;
			this.makeDirty(false);
		}
	}

	paint() {
		const { width, animation } = this;

		this.spLight.moveTo(width / 2 * (1 - animation));
		this.spLight.attr({
			shape: { width: width * animation }
		});
		super.paint();
	}
}

export { Panel };
